<template>
    <div id="main" class="main_mod">
        <!-- menu -->
        <el-row>
            <el-col :span="6" v-for="($item, $idx) in userMainMenu" :key="'main_' + $idx">
                <div class="grid-content bg-purple" @click="openTabMethod($item.name)">
                    <i :class="$item.mainClass"></i>
                    <span>{{$item.text}}</span>
                    <strong class="icon-ddex-look"></strong>
                </div>
            </el-col>
        </el-row>
        <!-- 公告等 -->
        <div class="notice"></div>
    </div>
</template>
<script>
import {
    mapGetters,
} from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        ...mapGetters(['userMainMenu'])
    },
    methods: {
        openTabMethod(name) {
            this.$taber.open(name)
        },
    }
}
</script>
<style scoped>
.main_mod {
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    overflow: auto;
}

.el-row {
    margin-bottom: 15px;
}

.el-col {
    background-color: #fff;
    margin-right: 15px;
    min-width: 250px;
}

.el-col div {
    display: flex;
    padding: 25px 25px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.el-col div i {
    display: inline-block;
    vertical-align: middle;
    font-size: 35px;
    text-align: center;
    color: #fff;
    padding: 16px;
    border-radius: 5%;
    -moz-box-shadow: 0px 0px 8px 1px #ccc;
    -webkit-box-shadow: 0px 0px 8px 1px #ccc;
    box-shadow: 0px 0px 8px 1px #ccc;
}

.el-col div .upload {
    background-color: #749AFB;
}

.el-col div .report {
    background-color: #73BFFB;
}

.el-col div .edit {
    background-color: #80D174;
}

.el-col div span {
    font-size: 16px;
    margin-left: -10%;
    color: #343434;
}

.el-col div strong {
    font-size: 16px;
    color: #D4DFE3;
    background-color: #F3F8FB;
    padding: 7px;
    border-radius: 50%;
}

.notice {
    height: 450px;
    background-color: #fff;
}
</style>